<template>
  <div>
    <!-- <ProForm ref="dialogForm" :config="addeditConfig" :echo="echo"></ProForm> -->
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="學生名稱" prop="name"><el-input v-model="form.name" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="手機號碼" prop="mobile"><el-input v-model="form.mobile" /></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="聯絡人" prop="contact">
            <el-button class="button" color="#F7B32B" type="primary" icon="Plus" @click="addPerson">聯絡人</el-button>
            <div class="flex items-center">
              <div v-for="(value, index) in contact" :key="index" class="flex items-center ml-[10px]"><el-icon>
                  <User />
                </el-icon>{{ value.name }}</div>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="登錄名" prop="username"><el-input v-model="form.username" /></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="密碼" prop="password"><el-input v-model="form.password" type="password"
              show-password /></el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="電子郵箱" prop="email"><el-input v-model="form.email" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="地址" prop="address"><el-input v-model="form.address" /></el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="英文名" prop="ename"><el-input v-model="form.ename" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="來源" prop="source"><el-input v-model="form.source" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="備註" prop="remark"><el-input v-model="form.remark" /></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性別" prop="sex">
            <el-select v-model="form.sex" size="default">
              <el-option v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="狀態" prop="status">
            <el-select v-model="form.status" size="default">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="調課次數" prop="num"><el-input v-model="form.num" /></el-form-item>
        </el-col> -->

        <el-col :span="8">
          <el-form-item label="生日" prop="birthday">
            <el-date-picker v-model="form.birthday" value-format="YYYY-MM-DD" type="date" placeholder="Pick a day"
              size="default" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="身份證" prop="identity"><el-input v-model="form.identity" /></el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="學生類型" prop="student_type_id">
            <el-select v-model="form.student_type_id" size="default">
              <el-option v-for="item in studentTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="學歷" prop="education"><el-input v-model="form.education" /></el-form-item>
        </el-col>

        <!-- <el-col :span="8">
          <el-form-item label="与学生关系" prop="relation"><el-input v-model="form.relation" /></el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="卡號" prop="card_number"><el-input v-model="form.card_number" /></el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="發票默認學生" prop="defaultInvoice">
            <el-radio-group v-model="form.defaultInvoice">
              <el-radio label="1">是</el-radio>
              <el-radio label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <div class="flex justify-end mt-10 w-[100%]">
      <el-button @click="emit('addCancal')">取消</el-button>
      <el-button type="primary" @click="confirm(ruleFormRef, buttonType)" color="#081F42">確定</el-button>
    </div>

    <fou-dialog :title="'新增聯絡人'" v-model:dialogValue="dialogValue">
      <template #content>
        <el-form ref="formRef" :model="dynamicValidateForm">
          <el-button @click="addDomain" color="#081F42">添加聯絡人</el-button>
          <div class="mt-[15px]">
            <div class=" flex  justify-start">
              <div v-for="(item, index) in dynamicValidateForm.domains" :key="index" class="w-[250px]  mr-10">
                <el-form-item :prop="item.name"> <el-input v-model="item.name" placeholder="聯絡人名稱(必填)" /></el-form-item>
                <el-form-item :prop="item.relation"> <el-input v-model="item.relation"
                    placeholder="與學生關係(必填)" /></el-form-item>
                <el-form-item :prop="item.phone"> <el-input v-model="item.phone"
                    placeholder="聯絡人聯絡電話(必填)" /></el-form-item>
                <el-form-item :prop="item.homePhone"> <el-input v-model="item.homePhone" placeholder="住宅電話" />
                </el-form-item>
                <el-form-item :prop="item.address"> <el-input v-model="item.address" placeholder="地址" /> </el-form-item>
                <el-button type="danger" v-if="index > 0" @click="delFamily(index)">刪除</el-button>
              </div>
            </div>
          </div>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="dialogValue = false">取消</el-button>
        <el-button @click="submitForm(formRef)" color="#081F42">確定</el-button>
      </template>
    </fou-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { message } from '@/common/function.js'
import { addStudent, updateStudent } from '@/http/index.js'
const formRef = ref('')
let contact = ref([])
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      dynamicValidateForm.domains.forEach(e => {
        console.log(e);
        if (e.name == '') {
          message('請填寫姓名')
        } else
          if (e.relation == '') {
            message('請填寫與學生關係')
          } else
            if (e.phone == '') {
              message('請填寫聯繫電話')
            } else {
              contact.value = dynamicValidateForm.domains
              form.contact = JSON.stringify(dynamicValidateForm.domains)
              dialogValue.value = false
            }
      })
    }
  })
}
const addDomain = () => {
  if (dynamicValidateForm.domains.length === 3) {
    return
  }
  dynamicValidateForm.domains.push({
    name: '',
    relation: '',
    phone: '',
    homePhone: '',
    address: '',
  })
}
const dynamicValidateForm = reactive({
  domains: [
    {
      name: '',//联系人名称(必填)
      relation: '',//与学生关系(必填)
      phone: '',//电话(必填)
      homePhone: '',//住宅电话
      address: '',//地址
    }
  ]
})
const delFamily = (i) => {
  console.log(i);
  dynamicValidateForm.domains.splice(i, 1);
}

const ruleFormRef = ref('')
const form = reactive({
  // school_id:localStorage.getItem('school_id'),
  name: "",
  mobile: "",
  username: '',
  password: '',
  email: "",
  address: "",
  ename: "",
  source: '',
  remark: '',
  sex: "",
  status: 1,
  num: 99,
  birthday: '',
  identity: '',
  student_type_id: '',
  education: '',
  // relation:'',
  card_number: '',
  contact: '',
  // defaultInvoice:'2'
});

const dialogValue = ref(false);
const addPerson = () => {
  dialogValue.value = true;
};
const sexOptions = [
  {
    value: 1,
    label: '男',
  }, {
    value: 2,
    label: '女',
  }
]
const statusOptions = [
  {
    value: 1,
    label: '現有',
  }, {
    value: -1,
    label: '過往',
  }
]
const emit = defineEmits(['addConfirm', 'addCancal'])
const confirm = async (formEl, type) => {
  console.log(form);
  if (!formEl) return;
  formEl.validate(async (e) => {
    if (e) {
      if (type == 'add') {
        const data = await addStudent(form)
        if (data.code == 200) {
          message('添加學生成功')
          emit('addConfirm')
        }
      } else {
        const data = await updateStudent(form)
        console.log(data);
        if (data.code == 200) {
          message('修改學生成功')
          emit('addConfirm')
        }
        console.log(form, 'edit');
      }

    }
  })
};
defineExpose({
  // DialogCofirm,
});

const props = defineProps({
  echo: Object,
  buttonType: String,
  studentTypeList: Object,
  rules: Object
})
const type = ref('')
type.value = props.buttonType
watch(() => props.buttonType, (newval) => {
  // type.value = newval
  if (newval == 'add') {
    dynamicValidateForm.domains.splice(1)
    contact.value = []
    for (const key in form) {
      if (key != 'school_id') {
        form[key] = ''
      }
    }
    dynamicValidateForm.domains.forEach(domain => {
      for (const key in domain) {
        domain[key] = ''
      }
    })
  }
  console.log(form);
})
Object.assign(form, props.echo)
console.log(form);
contact.value = props.echo.contact
if (props.echo.contact && props.echo.contact.length > 0) {
  props.echo.contact.map((item, index) => {
    if (props.echo.contact.length > dynamicValidateForm.domains.length) {
      dynamicValidateForm.domains.push({
        name: '',
        relation: '',
        phone: '',
        homePhone: '',
        address: '',
      })
    }
    Object.assign(dynamicValidateForm.domains[index], item)
  })
}

// 監聽echo彈窗 賦值
watch(() => props.echo, (newval) => {
  console.log(newval);
  contact.value = newval.contact
  Object.assign(form, newval)
  if (newval.contact && newval.contact.length > 0) {
    let newlength = newval.contact.length
    let domlength = dynamicValidateForm.domains.length
    newval.contact.map((item, index) => {
      Object.assign(dynamicValidateForm.domains[index], item)
      if (newlength > domlength && newlength != domlength) {
        dynamicValidateForm.domains.push({
          name: '',
          relation: '',
          phone: '',
          homePhone: '',
          address: '',
        })
      }

    })
    dynamicValidateForm.domains.splice(newval.contact.length)
  } else {
    dynamicValidateForm.domains.splice(1)
    dynamicValidateForm.domains.forEach(domain => {
      for (const key in domain) {
        domain[key] = ''
      }
    })

  }
})




onMounted(() => {
})
</script>

<style lang='less' scoped>
.button {
  color: #fff;
}
</style>